define(function(){
    return function (){
        function BigImg(){
            // 1. 选择元素
            this.sBox = document.querySelector(".details-left-img")
            this.sSpan = document.querySelector(".details-l-r-xhk")
            this.bBox = document.querySelector(".details-l-r-fdj")
            this.bImg = document.querySelector(".details-l-r-fdj-img")
            // 2. 执行绑定事件
            this.addEvent();
        }
        BigImg.prototype.addEvent = function(){
            const that = this;
            // 绑定进入事件：显示
            this.sBox.onmouseover = function(){
                that.sSpan.style.display = "block";
                that.bBox.style.display = "block";
            }
            // 绑定离开事件：隐藏
            this.sBox.onmouseout = function(){
                that.sSpan.style.display = "none";
                that.bBox.style.display = "none";
            }
            // 绑定移动事件：执行移动功能
            this.sBox.onmousemove = function(eve){
                const e = eve || window.event;
                // 3. 执行移动功能
                that.move(e)
            }
        }
        BigImg.prototype.move = function(e){
            // 4. 先计算要移动的位置
            console.log(e.pageX);
            let l = e.pageX   - this.sSpan.offsetWidth/2;
            let t = e.pageY   - this.sSpan.offsetHeight/2;
            // 5. 边界限定
            if(l<this.sBox.offsetLeft) l=this.sBox.offsetLeft;
            if(t<this.sBox.offsetTop) t=this.sBox.offsetTop;
            if(l>this.sBox.offsetWidth+this.sBox.offsetLeft-this.sSpan.offsetWidth){
                l=this.sBox.offsetWidth+this.sBox.offsetLeft-this.sSpan.offsetWidth
            }
            if(t>this.sBox.offsetHeight+this.sBox.offsetTop-this.sSpan.offsetHeight){
                t=this.sBox.offsetHeight+this.sBox.offsetTop-this.sSpan.offsetHeight
            }
            // 6. 设置给遮罩层
            this.sSpan.style.left = l +  "px"
            this.sSpan.style.top = t + "px"
            // 7. 计算遮罩层移动的比例
            const x = (l-this.sBox.offsetLeft) / (this.sBox.offsetWidth-this.sSpan.offsetWidth)
            const y = (t-this.sBox.offsetTop) / (this.sBox.offsetHeight-this.sSpan.offsetHeight)
            // console.log(x, y)
            // 8. 根据遮罩层移动的比例，计算右侧大图应该移动的距离
            this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
            this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
}


new BigImg();
    }
})